<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MonkeyCMS</title>
<link type="text/css" rel="stylesheet" href="statics/css/monkey.css"/>
<link type="text/css" rel="stylesheet" href="statics/css/frame.css"/>
<script type="text/javascript" src="statics/js/jquery.min.js"></script>
<!--tabs-->
<script type="text/javascript" src="statics/js/jquery.idtabs.min.js"></script>
<!--editor-->
<script type="text/javascript" src="statics/js/editor/kindeditor.min.js"></script>
<script type="text/javascript" src="statics/js/editor/lang/zh_CN.js"></script>
<link type="text/css" rel="stylesheet" href="statics/js/editor/themes/default/default.css" />
<!--validator-->
<script type="text/javascript" src="statics/js/koo.min.js"></script>
<script type="text/javascript">
$(function(){
	//validator
	$('.u_form').Koo();

	//editor
	KindEditor.ready(function(K) {
		K.create('#content', {
			themeType : 'default'
		});
	});
});
</script>

<script type="text/javascript" src="statics/js/monkey.js"></script>
</head>

<body>
<!--page_header-->
<div class="page_header">
	<h3><span class="iconfont">&#xf044;</span>表单演示</h3>
	<p>包含常用表单的演示说明</p>
</div>
<!--/page_header-->

<!--page_main-->
<div class="page_main">

	<!--tabs-->
	<div class="u_tab" id="tabs">
		<ul class="u_tab_items">
			<li class="u_tab_item"><a href="#tab1" class="selected">基本信息</a></li>
			<li class="u_tab_item"><a href="#tab2">富文本</a></li>
			<li class="u_tab_item"><a href="#tab3">表单验证</a></li>
		</ul>

		<div id="tab1" style="display: block;">
		<!--form-->
		<table class="u_table u_table_inbox">
			<form class="u_form" name="" method="post" action="#">
			<tbody>
				<tr>
					<td width="140" align="right">表单项文本：</td>
					<td>单行文本内容</td>
				</tr>
				<tr>
					<td align="right">表单项文本：</td>
					<td><input class="u_input" type="text" /></td>
				</tr>
				<tr class="u_form_item_error">
					<td align="right"><span class="u_fom_required">*</span>表单项文本：</td>
					<td>
						<input class="u_input" type="text" />
						<span class="u_form_explain u_tiptext u_tiptext_error"> <i class="u_tiptext_icon iconfont" title="出错">&#xf057;</i>错误文字</span>
					</td>
				</tr>
				<tr class="u_form_item_success">
					<td align="right">单行文本：</td>
					<td>
						<input class="u_input" type="text" />
						<span class="u_form_explain u_tiptext u_tiptext_success"> <i class="u_tiptext_icon iconfont" title="成功">&#xf058;</i>成功文字。</span>
					</td>
				</tr>
				<tr class="u_form_item_focus">
					<td align="right">表单项文本：</td>
					<td>
						<input class="u_input" type="text" />
						<span class="u_form_other">焦点文本</span>
					</td>
				</tr>
				<tr>
					<td align="right">不可用input：</td>
					<td><input class="u_input u_input_disable" type="text" disabled> </td>
				</tr>
				<tr>
					<td align="right">下拉框：</td>
					<td>
						<select id="province" name="select" class="u_select">
			                <option value="">请选择</option>
			                <option value="北京">北京</option>
			                <option value="上海">上海</option>
			                <option value="天津">天津</option>
			                <option value="浙江">浙江</option>
			            </select>
					</td>
				</tr>
				<tr>
					<td align="right">多选项：</td>
					<td><input type="checkbox" /> 多选  <input type="checkbox" /> 多选</td>
				</tr>
				<tr>
					<td align="right">单选项：</td>
					<td><input type="radio" /> 单选  <input type="radio" /> 单选</td>
				</tr>
				<tr>
					<td align="right">验证码：</td>
					<td>
						<input class="u_input u_input_checkcode" type="text" data-explain="请输入右图中字符，不区分大小写。" maxlength="4" autocomplete="off" value="" name="fourcode">
						<img class="u_checkcode_imgcode_img" align="absMiddle" alt="请输入您看到的内容" src="https://omeo.alipay.com/service/checkcode?sessionID=82012ab6b1f4ed9e675fb9092a25cb3b&r=0.9321065918075809"  title="点击刷新图片校验码">
	            		<a href="#">看不清，换一张</a>
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="submit" class="u_button u_button_blue" value="确定">&nbsp;&nbsp;
	           			<input type="button" class="u_button u_button_gray" value="取消">
					</td>
				</tr>

			</tbody>
			</form>
		</table>
		<!--/form-->
		</div>

  		<div id="tab2" style="display: none;">
  			<!--editor-->
  			<table class="u_table u_table_inbox">
  				<tbody>
  					<tr>
  						<td width="140" align="right">富文本：</td>
  						<td>
  							<textarea id="content" name="content" style="width:100%;height:450px;visibility:hidden;"></textarea>
  						</td>
  					</tr>
  				</tbody>
  			</table>
  			<!--/editor-->
  		</div> 
  		<div id="tab3" style="display: none;">
  			<!--validator-->

  			<form class="u_form" name="" method="post" action="#">
  			<table class="u_table u_table_inbox">
  				<tbody>
  					<tr>
  						<td width="140" align="right">不能为空：</td>
  						<td>
  							<input type="text" class="u_input" check="need" />
  						</td>
  					</tr>
  					<tr>
  						<td align="right">只能输入数字：</td>
  						<td>
  							<input type="text" class="u_input" check="digit" />
  						</td>
  					</tr>
  					<tr>
  						<td align="right">只能输入中文字符：</td>
  						<td>
  							<input type="text" class="u_input" check="chinese" />
  						</td>
  					</tr>
  					<tr>
  						<td align="right">只能输入身份证号：</td>
  						<td>
  							<input type="text" class="u_input" check="card" />
  						</td>
  					</tr>
  					<tr>
  						<td align="right">给输入框绑定日期控件：</td>
  						<td>
  							<input type="text" class="u_input" check="date" />
  						</td>
  					</tr>
  				</tbody>
  			</table>
  			<!--/validator-->
  			</form>
  		</div>

	</div>
	<!--/tabs-->

	<script type="text/javascript">$("#tabs ul").idTabs();</script>






</div>
<!--/page_main-->

</body>
</html>